import { FC, useState } from "react";
import { View, Text, Image } from "@tarojs/components";
import { useEnv, useNavigationBar, useModal, useToast } from "taro-hooks";
import { useLoad, useReachBottom, useRouter } from "@tarojs/taro";
import { AtButton, AtCard } from "taro-ui";

interface ItemViewProps {
  src?: string;
  text?: string;
  item: any;
  number?: number;
  routerPath?: string;
  // detailClick?(): void;
  detailClick?: () => void;
  toCartClick?: () => void;
  addCartClick?: () => void;
  reduceCartClick?: () => void;
}
/**
 * index页面和cart页面复用这个组件
 *
 * 1. 根据路由判断 useRouter
 * 2. 根据判断，展示不同的ui
 *
 */

const ItemView: FC<ItemViewProps> = ({
  routerPath,
  item,
  detailClick, // 跳转详情
  toCartClick, // 加入购物车
  addCartClick, // 购物车++
  reduceCartClick, // 购物车--
}) => {
  console.log("复用组件中接收到的routerPath", routerPath);
  const [btnLoading, setBtnLoadin] = useState<boolean>(false);
  return (
    <View style={{ margin: "10px" }}>
      <AtCard note="小Tips" extra="额外信息" title={item.text} thumb={item.src}>
        <Image
          onClick={() => {
            detailClick && detailClick();
          }}
          src={item.src}
        ></Image>
        {routerPath === "/pages/index/index" ? (
          <AtButton
            onClick={toCartClick}
            loading={btnLoading}
            type="primary"
            size="small"
          >
            +
          </AtButton>
        ) : (
          <>
            <AtButton
              onClick={addCartClick}
              loading={btnLoading}
              type="primary"
              size="small"
            >
              +
            </AtButton>
            <Text>{item.number}</Text>
            <AtButton
              onClick={reduceCartClick}
              loading={btnLoading}
              type="primary"
              size="small"
            >
              -
            </AtButton>
          </>
        )}
      </AtCard>
    </View>
  );
};

export default ItemView;
